<template>
  <div class="article-detail" v-if="article">
    <h2 class="article-title">{{article.title}}</h2>
    <div class="article-info">
      <div class="article-time"><i class="el-icon-date"></i>{{article.time}}</div>
      <div class="article-type"><i class="el-icon-document"></i>{{article.type}}</div>
      <div class="article-views"><i class="el-icon-view"></i>{{article.views}}</div>
    </div>
    <div class="article-cover" v-if="coverImg">
      <img :src="coverImg" alt="">
    </div>
    <p class="article-content" v-html="article.content"></p>
  </div>
</template>

<script>
export default {
  name: "ArticleDetailCard",
  props: {
    article: {type: Object, required: true},
    coverImg: {type: String}
  }
}
</script>

<style scoped lang="less">
  .article-detail {
    width: 100%;
    .article-title {
      font-size: 28px;
      line-height: 32px;
      margin: 20px 0;
      letter-spacing: 2px;
      text-align: center;
    }
    .article-info {
      //width: 400px;
      //margin: 20px auto;
      display: flex;
      justify-content: center;  // 水平居中
      align-items: center;  // 垂直居中
      .article-time, .article-type, .article-views {
        font-size: 12px;
        line-height: 16px;
        margin: 4px 10px;
        color: #99a9bf;
        i {
          margin-right: 4px;
        }
      }
    }
    .article-cover {
      width: 100%;
      height: 300px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .article-content {
      text-align: left;
      font-size: 16px;
      line-height: 20px;
      margin: 20px 10px;
      color: #939393;
      text-indent: 2em;  // 段落首行缩进2字符
    }
  }
</style>
